:root {
    --background-color: #2c3e50;
    --color1: #34495e;
    --color2: #7591AD;
    --color3: #EC3E27;
}

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1600px;
}

.box {
    transform: scale(.8);
}

.box div {
    position: relative;
    width: 350px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    animation: zhuan 5s linear infinite;
}

@keyframes zhuan {
    0% {
        transform: rotateY(-30deg) rotateX(0deg);
    }
    100% {
        transform: rotateY(-30deg) rotateX(360deg);
    }
}

.box::before {
    /* 这里实现了风车的阴影 */
    position: absolute;
    content: "";
    width: 100px;
    height: 100px;
    bottom: -200px;
    left: 50%;
    filter: blur(50px);
    opacity: .8;
    border-radius: 100%;
    background-color: #000;
    /* 定位，以及旋转实现扁平 */
    transform: translate(-50%) rotateX(-45deg);
}

.box span {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, #f1f1f1, #bbb, #f1f1f1);
    border-radius: 20px;
    transform-origin: center;
}

.box span:nth-child(1) {
    transform: rotateX(0deg);
}

.box span:nth-child(2) {
    transform: rotateX(45deg);
}

.box span:nth-child(3) {
    transform: rotateX(90deg);
}

.box span:nth-child(4) {
    transform: rotateX(135deg);
}